<template>
  <div class="refine_sfcreateships">
    <h2 class="titleblue">{{title}}</h2>
    <div class="contant">
      <el-form ref="form" :model="form" label-width="100px">
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="搜救机构">
                <el-select :disabled="detail=='look'?true:false" v-model="organization" class="select-width-220">
                  <el-option v-for="item in dpOptions" :key="item.value" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="救助力量">
                <el-select :disabled="detail=='look'?true:false" v-model="form.powerType" class="select-width-220">
                  <el-option v-for="item in ptOptions" :key="item.value" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="船舶所有人">
                <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.owner"
                          placeholder=""></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="电话">
                <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.ownerTelephone"
                          placeholder=""></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="联系人">
                <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.contact"
                          placeholder=""></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="船名">
                <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.shipName"
                          placeholder=""></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="航区">
                <el-select :disabled="detail=='look'?true:false" v-model="form.sailingAreaName"
                           class="select-width-220">
                  <el-option v-for="item in navOption" :key="item.value" :label="item.name"
                             :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="船舶种类">
                <el-select :disabled="detail=='look'?true:false" v-model="form.shipType" class="select-width-220">
                  <el-option v-for="item in typeOptions" :key="item.value" :label="item.name"
                             :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="船长(米)">
                <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.shipWidth"
                          placeholder=""></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="总吨">
                <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.grossTonnage"
                          placeholder=""></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="功率(KW)">
                <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.enginePower"
                          placeholder=""></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="最高航速(节)">
                <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.airSpeed"
                          placeholder=""></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="最大续航能力">
                <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.endurance"
                          placeholder=""></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="抗风等级">
                <el-select :disabled="detail=='look'?true:false" v-model="form.windLevel" class="select-width-220">
                  <el-option v-for="item in resOption" :key="item.value" :label="item.name"
                             :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="消防设备">
                <el-input :disabled="detail=='look'?true:false" class="select-width-220"
                          v-model="form.fireFightingEquipment" placeholder=""></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="通信设备">
                <el-input :disabled="detail=='look'?true:false" class="select-width-220"
                          v-model="form.communicationEquipment" placeholder=""></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="停泊位置">
                <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.berth"
                          placeholder=""></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="MMSI">
                <el-input :disabled="detail=='look'?true:false" class="select-width-220" v-model="form.mmsi"
                          placeholder=""></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="21">
            <el-form-item label="备注">
              <el-input :disabled="detail=='look'?true:false" type="textarea" v-model="form.remark"
                        placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="footerbtn" v-show="footerbtn">
        <el-button class="sure" @click="sure">确定</el-button>
        <el-button class="cancel" @click="cancel">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import * as sosShipService from '@/services/SosShipService'
  import dictService from '@/services/DictionaryService.js'

  export default {
    name: 'CreateBerth',
    props: ['id', 'detail', 'dpOptions', 'ptOptions', 'typeOptions', 'dpOption', 'jxOptions', 'navOption'],
    watch: {
      detail: function (value) {
        if (value == 'create') {
          this.footerbtn = true
          this.title = '新建应急船舶'
        } else if (value == 'edit') {
          this.footerbtn = true
          this.title = '编辑船舶'
        } else if (value == 'look') {
          this.footerbtn = false
          this.title = '船舶详情'
        }
      }
    },
    data: function () {
      return {
        organization: '',
        form: {
          airSpeed: '', // 最高航速(节) ,
          berth: '', // 停泊位置 ,
          communicationEquipment: '', // 通信设备 ,
          contact: '', // 联系人 ,
          endurance: '', // 最大续航能力 ,
          enginePower: '', // 功率(KW) ,
          fireFightingEquipment: '', // 消防设备 ,
          grossTonnage: '', // 总吨 ,
          mmsi: '', // MMSI ,
          owner: '', // 船舶所有人 ,
          ownerTelephone: '', // 电话 ,
          remark: '', // 备注 ,
          sailingAreaName: '', // 航区 ,
          shipName: '', // 船名 ,
          shipWidth: '', // 船长(米) ,
          sosOrg: '', // 搜救机构 ,
          powerType: '', // 救助力量 ,
          shipType: '', // 船舶种类 ,
          windLevel: '' // 抗风等级
        },
        title: '新增应急船舶',
        resOption: [],
        footerbtn: true,
        sjhq: [],
        kfdj: [],
        outId: ''
      }
    },
    created () {
      var value = this.detail
      if (value == 'create') {
        this.footerbtn = true
        this.title = '新建应急船舶'
      } else if (value == 'edit') {
        this.footerbtn = true
        this.title = '编辑应急船舶'
        this.showDetail()
      } else if (value == 'look') {
        this.footerbtn = false
        this.title = '应急船舶详情'
        this.showDetail()
      }
      this.getSelect()
    },
    methods: {
      showDetail () {
        var data = this.$route.params.data
        for (let key in data) {
          if (key == 'id') {
            this.detailId = data[key]
          } else if (key == 'createTime') {
            this.createTime = data[key]
          } else if (key == 'sosOrg' && data[key]) {
            this.dpOptions.forEach(item => {
              if (data[key] == item.name) {
                this.organization = item.id
                // this.form[key] = item.id
              }
            })
          } else if (key == 'sailingAreaName' && data[key]) {
            this.navOption.forEach(item => {
              if (data[key] == item.name) {
                this.form[key] = item.id
              }
            })
          } else if (key == 'powerType' && data[key]) {
            this.ptOptions.forEach(item => {
              if (data[key] == item.name) {
                this.form[key] = item.id
              }
            })
          } else if (key == 'shipType' && data[key]) {
            this.typeOptions.forEach(item => {
              if (data[key] == item.name) {
                this.form[key] = item.id
              }
            })
          } else {
            this.form[key] = data[key]
          }
        }
      },
      getSelect () {
        dictService.find('KFDJ').then(res => {
          this.resOption = res
        })
      },
      async sure () {
        let sosOrg = {}
        await this.dpOptions.forEach(item => {
          if (item.id == this.organization) {
            sosOrg = item
          }
        })
        let obj = {
          airSpeed: this.form.airSpeed,
          berth: this.form.berth,
          communicationEquipment: this.form.communicationEquipment,
          contact: this.form.contact,
          endurance: this.form.endurance,
          enginePower: this.form.enginePower,
          fireFightingEquipment: this.form.fireFightingEquipment,
          grossTonnage: this.form.grossTonnage,
          mmsi: this.form.mmsi,
          owner: this.form.owner,
          ownerTelephone: this.form.ownerTelephone,
          remark: this.form.remark,
          sailingAreaName: this.form.sailingAreaName,
          shipName: this.form.shipName,
          shipWidth: this.form.shipWidth,
          sosOrg,
          powerType: this.form.powerType,
          shipType: this.form.shipType,
          windLevel: this.form.windLevel
        }
        if (this.title == '编辑应急船舶') {
          obj.id = this.detailId
          obj.createTime = this.createTime
          sosShipService.update(obj).then(res => {
            if (res) {
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
              this.$emit('close')
            }
          })
        } else {
          sosShipService.create(obj).then(res => {
            if (res) {
              this.$message({
                type: 'success',
                message: '创建成功!'
              })
              this.$emit('close')
            }
          })
        }
      },
      cancel () {
        this.$emit('close')
      },
      getData (id) {
        this.$axios.get(this.$config['detailSosAgency'], {
          params: {
            skey: localStorage.getItem('auth'),
            d_id: this.id
          }
        }).then((res) => {
          if (res.data.content) {
            this.form = res.data.content
            for (var x of this.sjhq) {
              for (var a of x.son) {
                if (a.d_id == this.form.navZone) {
                  this.form.navZone = a.name
                  break
                }
              }
            }
            for (var i of this.kfdj) {
              for (var b of i.son) {
                if (b.d_id == this.form.resGrade) {
                  this.form.resGrade = b.name
                  break
                }
              }
            }
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .refine_sfcreateships {
    width: 100%;
    display: inline-block;
    padding-bottom: 50px;

    .el-form {
      width: 80%;
      margin: 0 auto;
    }

    .footerbtn {
      margin-top: 50px;
    }
  }
</style>
